<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
</head>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<div  id="open1" style="display: none;position: absolute;top: 20px;left: 30px">
    <div >
        <form class="layui-form" id="addEmployeeForm"  th:action="@{/cinemaVip/addVip}" method="post">
            <div class="layui-form-item" >
                <label class="layui-form-label">VIP名称:</label>
                <div class="layui-input-block" style="width: 300px">
                    <input type="text"  class="layui-input"  id="vname" onblur="check1()" name="vname">
                </div>
            </div>

            <div class="layui-form-item" >
                <label class="layui-form-label">优惠:</label>
                <div class="layui-input-block" style="width: 300px">
                    <!--required lay-verify="required | number"-->
                    <input type="text"  id="vdiscount" class="layui-input" name="vdiscount" onblur="check2()" lay-reqtext="输入格式错误" placeholder="请输入优惠，例：0.9">
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加VIP</button>

    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery.min.js}" charset="utf-8"></script>
<script th:inline="javascript">
    var url=[[@{/}]]
</script>
<script th:inline="none">

    var layer = layui.layer;
    var param1 = false;
    var param2 = false;
    function check1() {
        var a = $("#vname").val();
        if(a == '' | a == null){
            layer.msg('不能为空')
        } else{
            param1 = true;
        }
    }

    function check2() {
        var a = $("#vdiscount").val();
        if(a == '' | a == null){
            layer.msg('不能为空')
        }else if(parseFloat(a).toString() == 'NaN'){
            layer.msg('请输入数字')
        }else{
            param2 = true;
        }

    }


    layui.use('table', function(){
        var table = layui.table;
        var layer = layui.layer;
        table.render({
            elem: '#test'
            ,url:url+'cinemaVip/allVip'
            ,toolbar: '#toolbarDemo'
            ,title: 'VIP套餐表'
            ,limit:2
            ,id:'tab'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                ,{field:'vname', title:'VIP名称', width:360, edit: 'text'}
                ,{field:'vdiscount', title:'VIP优惠', width:360, edit: 'text', sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                case 'add':
                    layer.open({
                        type: 1,
                        title: '添加VIP用户',
                        closeBtn: 2 // 是否显示关闭按钮
                        , btn: ['确定', '取消']
                        , anim: 1 //动画类型
                        , icon: 6 // icon
                        , skin: 'layui-layer-lan'
                        , area: ["40%", "50%"]
                        , content: $("#open1")
                        , yes: function(index, layero){
                           if(param1 & param2){
                               $.ajax({
                                   url:url+'cinemaVip/addVip',
                                   type:'post',
                                   data:{
                                       'vname':$("#vname").val(),
                                       'vdiscount':$("#vdiscount").val()},
                                   success:function(result) {
                                       if (result == 'success'){
                                           layer.msg('添加成功')
                                       }else{
                                           layer.msg('添加失败')
                                       }
                                   }
                               })
                               layer.close(index); //如果设定了yes回调，需进行手工关闭
                               table.reload('tab',{
                                   url:url+'cinemaVip/allVip'
                               });

                           }
                        }
                    })
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('确认删除吗', function(index){
                    obj.del();
                    $.ajax({//删除用户的请求
                        url:url+"cinemaVip/deleteVip",
                        data:{"id":data.id},
                        dataType:"json",
                        success:function (resultDate) {
                            //  layer.msg("提示信息",resultDate);
                            if(resultDate == "success"){
                                layer.msg('删除成功');
                                //alert("删除成功")
                            }else{
                                layer.msg('删除失败，当前VIP有用户订购');
                                alert("删除失败，当前VIP有用户订购");
                            }
                        }
                    })
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                /*layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });*/
                $.ajax({
                    url:url+'cinemaVip/updateVip',
                    data:{'vname':data.vname,'vdiscount':data.vdiscount,'id':data.id},
                    success:function (result) {
                        if (result){
                        layer.msg('修改成功');
                        }

                    }
                })
            }
        });
    });
    
    layui.use('form',function () {
        var form = layui.form;
        /*form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
        });*/
    })

</script>
</body>
</html>